<template>
  <div class="login">
    <div class="login-bg">
      <div>
        <img class="mains" src="../../assets/image/logo/main.png" alt="">
      </div>
      <img class="logo" :src="Logo" alt="">
      <img class="login" :src="LogoBg" alt="">
    </div>
    <login-form :title="setting.title" :on-confirm="handleLogin" :initial-value="data" :is-remember.sync="rememberMe">
      <!-- <div class="el-login-footer">
        <a class="about text-primary-color" href="javascript:;" @click="handleAboutClick">关于我们</a>
        <div class="record"><a href="javascript:;">copyright@ ICP20200715</a></div>
      </div> -->
    </login-form>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import { decrypt, setAppId, AppId, setToken } from "@monkey.do/monkey";
import LoginForm from "./login-form";
import LogoBg from "@/assets/image/logo/login.png";
import Logo from "@/assets/image/logo/logo.png";
import { router } from "@/main";
const setting = require("@/settings");

export default {
  name: "Login",
  components: { LoginForm },
  data() {
    return {
      LogoBg,
      Logo,
      rememberMe: false,
      loading: false,
      redirect: undefined,
      data: {
      },
      setting,
    };
  },
  computed: {
    loginForm: {
      get() {
        return this.$store.getters.loginForm;
      },
      set(val) {
        this.$store.commit("setLoginForm", val);
      },
    },
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.getCookie();
  },
  methods: {
    getCookie() {
      const username = Cookies.get('username');
      const password = Cookies.get('password');
      const rememberMe = Cookies.get('rememberMe');
      const appId = Cookies.get(AppId) || "3"; // 默认一站通
      this.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe);
      this.data = {
        username: username === undefined ? this.data.username : username,
        password: password === undefined ? this.data.password : decrypt(password),
        appId,
      };
    },
    setCookie(value) {
      if (this.rememberMe) {
        Cookies.set('username', value.username, { expires: 30 });
        Cookies.set('password', value.password, { expires: 30 });
        Cookies.set('rememberMe', this.rememberMe, { expires: 30 });
        Cookies.set('appId', value.appId, { expires: 30 });
      } else {
        Cookies.remove('username');
        Cookies.remove('password');
        Cookies.remove('rememberMe');
      }
    },
    handleLogin(value) {
      this.setCookie(value);
      return this.$store.dispatch('Login', value).then((res) => {
        if (res.statusCode === 600) {
          setAppId(value["appId"]);
          setToken(res.data);
          this.$router.push({ path: this.redirect || '/' });
        }
        return res;
      });
    },
    handleAboutClick() {
      router.push("/about");
    },
  },
};
</script>
<style lang="scss" scoped>
@import './login.scss';
</style>
